import React from 'react';
import Checkbox from 'components/checkbox';

export default class LeftMenu extends React.Component {
  constructor(props) {
    super(...props);

    this.state = {
      clear: false,
      dataList: []
    }
  }

  componentDidMount() {
    this.getData();
  }

  getData() {
    // get api some .............

    const data = [
      {
        title: '工程研发部门',
        sum: 120,
        subList: [
          {
            name: 'Mac开发工程师',
            num: 8
          }, {
            name: 'Java开发工程师',
            num: 82
          }, {
            name: '前端开发工程师',
            num: 31
          }, {
            name: '多媒体软件开发工程师',
            num: 13
          }
        ]
      }, {
        title: '产品设计部门',
        sum: 137,
        subList: [
          {
            name: '网页设计师',
            num: 77
          }, {
            name: '工业设计师',
            num: 12
          }, {
            name: '平面设计师',
            num: 4
          }, {
            name: '视觉设计师/GUI设计师',
            num: 8
          }
        ]
      }
    ];

    this.setState({
      dataList: data
    });
  }

  clearAll() {
    this.setState({
      clear: true
    }, () => {
      this.setState({
        clear: false
      });
    });

  }

  render() {
    let {
      state: {
        clear,
        dataList = []
      }
    } = this;

    return (
      <div className="menu">
        <p className="menu-title">
          招聘职位
        </p>
        <a
            href="javascript:;"
            className="menu-more"
            onClick={() => {
                this.clearAll()
            }}
        >
          清空
        </a>
        {
          dataList.map((item, keys) => {
            return (
              <Checkbox
                  clear = { clear }
                  data  = { item }
                  key   = { keys }
              />
            )
          })
        }
      </div>
    );
  }
}
